
<template>
  <div class="channel-edit">
    <!-- 当前登陆用户已经订阅的频道 -->
    <div class="channel">
      <van-cell title="我的频道"
                :border="false">
        <!-- 点击编辑 显示取消  点击取消  显示编辑 -->
        <van-button size="mini"
                    type="info"
                    @click="change">{{isShow?'取消':'编辑'}}</van-button>
      </van-cell>
      <van-grid>
        <van-grid-item v-for="(item,index) in myChannels"
                       :key="item.id">
          <span @click="changeTitle(index)">{{item.name}}</span>
          <!-- 推荐是默认数据，不需要有叉号 -->
          <van-icon name="cross"
                    class="btn"
                    @click.stop="delChannel(index)"
                    v-if="isShow&&index!=0"></van-icon>
        </van-grid-item>
      </van-grid>
    </div>
    <!-- 当前登陆用户没有订阅的频道 -->
    <div class="channel">
      <van-cell title="可选频道"
                :border="false"></van-cell>
      <van-grid>
        <van-grid-item v-for="channel in recommendChannels"
                       :key="channel.id"
                       @click="addChannel(channel)">
          <span>{{channel.name}}</span>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
import { getAllChannels, updateChannelList } from '@/api/channel'
export default {
  name: 'ChannelEdit',
  props: {
    myChannels: {
      type: Array
    }
  },
  data () {
    return {
      allChannels: [], // 获取到的所有的频道列表
      newArr: [], // 存放新数组
      isShow: false // 是否显示为取消
    }
  },
  methods: {
    // 调用接口获取所有频道
    hGetAllChannels () {
      getAllChannels().then(res => {
        this.allChannels = res.data.data.channels
      })
    },
    // 怎么显示编辑或取消
    change () {
      this.isShow = !this.isShow
    },
    // 选择目录，tab也随之显示一样的数据
    changeTitle (id) {
      this.$emit('changeTitle', id)
      this.isShow = false
    },
    // 点击叉号删除channel
    delChannel (index) {
      // 本地先删除
      this.myChannels.splice(index, 1)

      const newArr = this.myChannels.map((item, index) => {
        return {
          id: item.id,
          seq: index
        }
      }).filter((item) => {
        return item.id !== 0
      })
      updateChannelList({ channels: newArr }).then(res => {
        // 通知用户删除成功
        this.$toast('删除成功')
      })
    },
    // 实现可选频道添加为我的频道
    addChannel (item) {
      // 删除本地
      this.myChannels.push(item)
      // 调用接口
      const channel = this.myChannels.map((item, index) => {
        return {
          id: item.id,
          seq: index
        }
      }).filter((item) => {
        return item.id !== 0
      })
      updateChannelList({ channels: channel }).then(res => {
        // 通知用户添加成功
        this.$toast('添加成功')
      })
    }
  },
  computed: {
    // eslint-disable-next-line vue/return-in-computed-property
    recommendChannels () {
      const newArr = []
      this.allChannels.forEach((channel) => {
        const idx = this.myChannels.findIndex((item) => {
          return item.id === channel.id
        })
        if (idx === -1) {
          newArr.push(channel)
          this.newArr = newArr
        }
      })
      return newArr
    }

  },
  mounted () {
    this.hGetAllChannels()
  }

}

</script>

<style lang="less" scoped>
.channel {
  font-size: 13px;
}
.btn {
  position: absolute;
  top: 2px;
  right: 2px;
  font-size: 14px;
  color: red;
}
</style>
